<template>
    <ul>
      <MyNavBar></MyNavBar>
    <li
      class="cinema"
      v-for="{ name, address, lowPrice, Distance } in cinemas"
      :key="cinemaId"
    >
      <div class="left">
        <p class="name">{{ name }}</p>
        <p class="address">{{ address }}</p>
      </div>

      <div class="right">
        <p class="price">
          <span>￥{{ lowPrice / 100 + "起" }}</span>
        </p>
        <p class="distance">{{ Distance.toFixed(2) + "km" }}</p>
      </div>
    </li>
  </ul>
</template>
<script>
import{ getCinemas}from"../api/movieApi";
import MyNavBar from "../components/MyNavBar.vue";
export default {
  components:{
   MyNavBar,
  },
  data() {
    return {
     cinemas:null,
    };
  },
  mounted() {
    getCinemas(1).then(
      // 拿到Promise履约电影列表数据 赋值给当前组件实例this的films
      (cinemas) => (this.cinemas = cinemas)
    );
}
}
</script>
<style lang="scss" scoped>
@import "../assets/variable.scss";
.title {
  text-align: center;
  background-color: none;
  position: relative;
}
.mains{
  border-bottom: 1px solid #eee;
}
.bc{
  position: absolute;
  top:0px;
  padding-top: 6px;
  left: 4px;
}
li.cinema {
  display: flex;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid #eee;
  padding: 0 1rem;

  div.left {
    flex-grow: 4;

    p.name,
    p.address {
      @include singleLineElipsis(18rem);
    }

    p.name {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    p.address {
      font-size: 0.7rem;
      color: #999;
      font-style: italic;
    }
  }

  div.right {
    flex-grow: 1;

    p {
      text-align: center;
    }

    p.price {
      margin-bottom: 0.5rem;
      font-size: 0.8rem;

      span {
        font-size: 0.75rem;
        font-style: italic;
        font-weight: 400;
        color: $myOrange;
        display: inline-block;
        min-width: 60px;
      }
    }

    p.distance {
      font-size: 0.75rem;
      color: #999;
    }
  }
}
</style>
